<template>
  <div class="yhcl w-100 h-100">
    <div
      class="item"
      v-for="item in list"
      :key="item.name"
      :style="{
        background: `url(${item.bg}) no-repeat center center`,
        backgroundSize: '100% auto',
      }"
    >
      <div class="name">{{ item.name }}</div>
      <div class="value">{{ item.value }}{{item.unit}}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import bg1 from "@/assets/image/yingjizhihui/wzsl_1.png";
import bg2 from "@/assets/image/yingjizhihui/wzsl_2.png";
import bg3 from "@/assets/image/yingjizhihui/wzsl_3.png";
import bg4 from "@/assets/image/yingjizhihui/wzsl_4.png";
import bg5 from "@/assets/image/yingjizhihui/wzsl_5.png";
import bg6 from "@/assets/image/yingjizhihui/wzsl_6.png";
const baseList = [
  { name: "生活物资", bg: bg1,unit:'万吨' },
  { name: "能源供应", bg: bg2,unit:'件' },
  { name: "医疗保障", bg: bg3,unit:'件' },
  { name: "监测设备", bg: bg4,unit:'件'},
  { name: "通信设备", bg: bg5,unit:'件' },
  { name: "交通运输", bg: bg6 ,unit:'辆'},
];

const list: any = ref([]);

const props = defineProps({
  selectValue: {
    default: 0,
  },
});

const jsonData: any = inject("jsonData");
const current = computed(() => {
    
  let data = [];
  try {
    data = jsonData.value.yjzy.wzsl[props.selectValue];
  } catch (error) {}

  return data;
});
watch(
  () => current.value,
  (val) => {
    if (val) {
      list.value = val.map((value: any, index: number) => ({
        value,
        ...baseList[index],
      }));
    }
  }
);
</script>

<style lang="less" scoped>
.yhcl {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  flex-wrap:wrap ;
  align-items: stretch;
  padding:  40px 0;
  padding-bottom: 100px;
  .item {
    flex: 0 0 30%;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .value {
    font-family: DIN, DIN;
    font-weight: 500;
    font-size: 24px;
    color: #00F3FF;
  }
  .name {
    margin:  0 15px;
    margin-left: 50px;
    
  }
}
</style>
